<!-- 终端设备 -->
<template>
  <div class="terminal-manage">
    <Custom-tree @leafNodeClick="getNodeData"></Custom-tree>

    <div class="table-box">
      <CustomTable v-if="reqParams.dwdm" ref="tableRef" type="index" v-model:form="searchForm" :tableHeader="tableHeader" lastColMinWidth="23%" api="/znjszd3/ht/cnpset/getCnpList" :params="reqParams">
        <template v-slot:tableTop="{ rows }">
          <el-button type="primary" class="add" plain @click="add"
            ><el-icon><Plus /></el-icon>新增</el-button
          >
        </template>
        <template v-slot:lastColumn="{ row }">
          <el-button type="primary" plain @click.stop="view(row)">
            <el-icon><View /></el-icon>
            查看日志</el-button
          >
          <el-button type="primary" plain @click.stop="edit(row)">
            <el-icon><EditPen /></el-icon>
            修改</el-button
          >
          <el-button type="danger" plain @click.stop="del(row)"
            ><el-icon><Delete /></el-icon>删除</el-button
          >
        </template>
        <template #online="{ row }">
          <span v-if="row.online" style="color: #67c23a">在线</span>
          <span v-else style="color: red">离线</span>
        </template>
      </CustomTable>
      <CustomEmpty v-else />
    </div>

    <CustomDialog :title="diaglogType == 'add' ? '新增设备' : '修改设备'" v-model:dialogVisible="dialogVisible" width="30%" height="380rem" top="20vh" @confirm="confirm">
      <CustomForm ref="formRef" v-model:form="form" :editable="true" columns="1"> </CustomForm>
    </CustomDialog>
    <CustomDialog title="上下线日志" v-model:dialogVisible="logDialogVisible" @confirm="logDialogVisible = false">
      <CustomTable height="730rem" type="index" :tableHeader="logTableHeader" api="/znjszd3/onlineLog/getCnpOnlineLogList" :params="logReqParams">
        <template #type="{ row }">
          <span v-if="row.type == '上线'" style="color: #67c23a">上线</span>
          <span v-else style="color: red">下线</span>
        </template></CustomTable
      >
    </CustomDialog>
  </div>
</template>

<script setup name="terminalManage">
import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { http, fillData } from '@/utils/index.js'
import { stores } from '@/stores/index.js'
import Stomp from 'stompjs'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableRef = ref()
const formRef = ref()
const userStore = stores.useUserStore()
const dynamicParamsStore = stores.useDynamicParamsStore()
const props = defineProps({})
//当前选择单位代码
const currentdwdm = ref('')
const diaglogType = ref('add')
const loading = ref(false)
const tableLoading = ref(false)
const dialogVisible = ref(false)
const logDialogVisible = ref(false)
const rowData = ref({})
const form = ref({
  sbm: '',
  ip: '',
  jsh: '',
  jyfs: [],
  company: '',
  yztsurl: []
})

const tableHeader = ref([
  {
    key: 'sbm',
    label: '设备名',
    width: '12%'
  },
  {
    key: 'ip',
    label: '设备ip',
    width: '11%'
  },
  {
    key: 'companymc',
    label: '生产厂家',
    width: '7%'
  },
  {
    key: 'jshzw',
    label: '监室号',
    width: '8%'
  },
  {
    key: 'jyfs',
    label: '校验方式',
    width: '11%'
  },

  {
    key: 'online',
    label: '是否在线',
    width: '6%'
  },
  {
    key: 'bgr',
    label: '变更人',
    width: '8%'
  },
  {
    key: 'bgsj',
    label: '变更时间',
    sortable: 'custom',
    width: '14%'
  }
])
const logTableHeader = ref([
  {
    key: 'cnpip',
    label: '仓内屏ip'
  },

  {
    key: 'serverip',
    label: '服务器ip'
  },
  {
    key: 'time',
    label: '时间'
  },
  {
    key: 'type',
    label: '状态'
  }
])
const searchForm = ref({
  sbmc: '',
  ip: '',
  jsh: ''
})
//请求table数据所需的参数
const reqParams = ref({
  dwdm: ''
})
//请求日志table数据所需的参数
const logReqParams = ref({
  dwdm: '',
  cnpip: ''
})
onBeforeUnmount(() => {})
onMounted(async () => {})

const getNodeData = (node) => {
  reqParams.value.dwdm = node.zddm
  logReqParams.value.dwdm = node.zddm
  if (tableRef.value) {
    tableRef.value.getData()
  }
}

//
const confirm = (params) => {
  if (Array.isArray(params.jyfs)) {
    params.jyfs = params.jyfs.join()
  }
  if (Array.isArray(params.yztsurl)) {
    params.yztsurl = params.yztsurl.join()
  }

  if (diaglogType.value == 'add') {
    http(
      '/znjszd3/ht/cnpset/addCnp',
      'post',
      Object.assign(params, {
        dwdm: reqParams.value.dwdm
      }),
      false
    ).then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        tableRef.value.getData()
        dialogVisible.value = false
      }
    })
  } else {
    http(
      '/znjszd3/ht/cnpset/updateCnp',
      'post',
      Object.assign(params, {
        dwdm: reqParams.value.dwdm,
        ipOld: rowData.value.ip,
        id: rowData.value.id
      }),
      false
    ).then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        tableRef.value.getData()
        dialogVisible.value = false
      }
    })
  }
}

const add = () => {
  dialogVisible.value = true
  diaglogType.value = 'add'
}
const view = (row) => {
  logReqParams.value.cnpip = row.ip
  logDialogVisible.value = true
}
const edit = (row) => {
  console.log(row)
  rowData.value = row
  dialogVisible.value = true
  diaglogType.value = 'edit'
  fillData(form.value, row)
}
const del = (row) => {
  ElMessageBox.confirm('确定要删除该设备吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      tableLoading.value = true
      http(
        '/znjszd3/ht/cnpset/delCnpByIp',
        'post',
        {
          ip: row.ip
        },
        false
      ).then((res) => {
        if (res.status == 200) {
          tableRef.value.getData()
          ElMessage.success(res.message[0])
        }
      })
    })
    .finally(() => {
      tableLoading.value = false
    })
}
</script>

<style lang="scss" scoped>
.terminal-manage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  .tree-box {
    padding: 5px;
    height: 100%;
    width: 250px;
    background: #fff;

    .tree-title {
      margin-bottom: 10px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      padding: 20px;
      border-bottom: 1px solid #eee;
      .icon-daohang1 {
        margin-right: 5px;
        font-size: 16px;
        font-weight: 600;
      }
      .icon-shuaxin {
        cursor: pointer;
      }
    }
    ::v-deep(.el-tree) {
      height: calc(100% - 70px);
      overflow: auto;

      .el-tree-node__content {
        height: 40px;
      }
      .el-tree-node__label {
        font-size: 15px;
      }

      .el-tree-node.is-current {
        // background-color: #e5e5e5 !important;
        // .el-tree-node__content {

        // }
      }
      .tree-node {
        font-size: 15px;
      }
    }
  }

  .table-box {
    // border: 1px solid red;
    margin: 10px 10px 0;
    width: calc(100% - 210px);
    height: 965px;
    ::v-deep(.custom-table) {
      .add {
        .el-icon {
          font-size: 18px !important;
        }
      }
    }
  }
  .custom-table {
  }
}
::v-deep(.custom-dialog) {
  .add-form {
    margin-bottom: 30px;
    .el-input {
      margin-right: 15px;
      width: 380px;
    }
  }

  .el-tree.unit-tree {
    margin-bottom: 30px;
    height: 420px;
    overflow: auto;
    border: 1px solid red;
    .el-tree-node__label {
      font-size: 18px;
      font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .el-checkbox__inner {
      height: 18px;
      width: 18px;
      &::after {
        height: 8px;
        left: 6px;
        top: 3px;
      }
    }
    .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
      top: 7px;
    }
  }
  .el-collapse {
    .el-collapse-item__header {
      font-size: 16px !important;
    }
    .el-collapse-item__content {
      padding-bottom: 10px;
    }
    .el-result {
      margin-left: 5px;
      padding: 0;
      .el-result__icon {
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
          width: 25px;
          height: 25px;
        }
      }
    }
    .apk-name {
      height: 30px;
      display: flex;
      align-items: center;
      font-size: 14px;
      padding-left: 15px;
      .icon-anzhuo {
        margin-right: 5px;
        color: var(--el-color-primary);
        font-size: 20px;
      }
      .el-result__icon {
        svg {
          width: 18px;
          height: 18px;
        }
      }
    }
    .apk-uploading {
      margin-left: 10px;
      color: var(--el-color-primary);
      animation: rotate 2s linear infinite;
    }
  }
}
</style>
